﻿<%@ Page Title="Map Way Config City Links" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Category.aspx.cs" Inherits="WebRole1.Config.Category" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
   <link rel="stylesheet" href="/Scripts/JqueryTreeview/jquery.treeview.css" />

   <script type="text/javascript" src="/Scripts/ui/ui.draggable.js"></script>

   <script type="text/javascript" src="/Scripts/ui/ui.resizable.js"></script>

   <script type="text/javascript" src="/Scripts/ui/ui.dialog.js"></script>

   <script type="text/javascript" src="/Scripts/external/bgiframe/jquery.bgiframe.js"></script>

   <script src="/Scripts/JqueryTreeview/jquery.treeview.js" type="text/javascript"></script>
	<script src="/Scripts/JqueryTreeview/jquery.treeview.asyncWay.js" type="text/javascript"></script>

   <script src="/Scripts/vanadium/vanadium.js" type="text/javascript"></script>
   <script src="/Scripts/utils.js" type="text/javascript"></script>
   
   
   <script type="text/javascript">
      $.ui.dialog.defaults.bgiframe = true;
      $(function() {
         $("#PublishDivId").dialog({
            autoOpen: false,
            width: 650
         });

         $("#ChooseCityDivId").dialog({
            autoOpen: false
         });

         $("#DivBusy").dialog({
            autoOpen: false,
            modal: true
         });
         
//         $("#DivPickCategoryModifyDiv").dialog({
//            autoOpen: false
//         });
      });

      $(document).ready(function() {

         $("#chooseCategory").treeview({
            url: "/ajaxway.svc/GetChildCategoryNoCity",
            useRadio: true,
            checkFunction: "TC",
            checkClass: "CC",
            radioGroup: "radiomeGroup",
            persist: "location",
            collapsed: true,
            animated: false,
            unique: false
         })

         $("#chooseCity").treeview({
            url: "/ajaxway.svc/GetCity",
            type: "city",
            persist: "location",
            collapsed: true,
            unique: true,
            useLink: true,
            linkFunction: "ChooseCity",
            animated: false,
            unique: false
         });

//         $("#pickCategoryToModify").treeview({
//            url: "/ajaxway.svc/GetChildCategoryNoCity",
//            useLink: true,
//            linkFunction: "ModifyCat",
//            persist: "location",
//            collapsed: true,
//            animated: false,
//            unique: false
//         })

      });

      function TC(id) {
         $("#inputCategoryParentID").attr("value", id);
      }

      function PublishCategoryByName(name, desc, shortname) {
         $(".inputCategoryID").attr("value", "");
         $("#inputCategoryName").attr("value", name);
         $("#inputCategoryDesc").attr("value", desc);

         $("#inputCategoryShortName").attr("value", shortname);

         $('#PublishDivId').dialog('option', 'title', "Publish this Link");
         $("#InputButtonPublish").attr("value", "Publish this Link");
         $("#InputButtonDelete").hide();
         $("#publishNote").html("Note, only signed in user can publish a link");
         $('#PublishDivId').dialog('open');
      }
      
      function CheckAndDecorate() {
         var validation_result = Vanadium.validate();

         var success = true;
         validation_result.each(function(_element, validation_results) {
            for (var r in validation_results) {
               if (validation_results[r].success == false) {
                  success = false;
                  break;
               }
            }
            if (success == false) {
               return false; // break from hashmap iteration
            }
         });
         if (!success) {
            Vanadium.decorate(validation_result);
            return false;
         }
         return success;
      };


      function PublishSubmit() {

         if (!CheckAndDecorate()) {
            return;
         }

         if ($('#CurrentLiveUser').html() == "") {
            alert("You need to login to windows live account to submit.");
            return;
         }

         $('.inputCategoryName').attr("value", $("#inputCategoryName").attr("value"));
         $('.inputCategoryDesc').attr("value", $("#inputCategoryDesc").attr("value"));

         $('.inputCategoryShortName').attr("value", $("#inputCategoryShortName").attr("value"));
         $('.inputCategorySvcUrl').attr("value", $("#inputCategorySvcUrl").attr("value"));
         $('.inputCategorySvcUrlType').attr("value", $("#inputCategorySvcUrlType").attr("value"));
         $('.inputCategoryParentID').attr("value", $("#inputCategoryParentID").attr("value"));
         $('.inputMapIconUrl').attr("value", $("#inputMapIconUrl").attr("value"));
         $('.inputSearchCity').attr("value", $("#inputSearchCity").attr("value"));

         $('.inputButtonPublish').click();

         $('#PublishDivId').dialog('close');
      }


      function PublishDelete() {
         if (confirm("Are you really sure to delete this link?") == true) {
            $('.inputButtonDelete').click();
            $('#PublishDivId').dialog('close');
         }
      }

      function PickCity() {
         $('#ChooseCityDivId').dialog('open');
      }

      function ChooseCity(id, name, latitude, longtitude) {
         $('#inputSearchCity').attr('value', name);
         $('#ChooseCityDivId').dialog('close');
      }

//      function ClearCity() {
//         $('#inputSearchCity').attr('value', "");
//         $('#ChooseCityDivId').dialog('close');
//      }

//      function ModifyCategory() {
//         $('#DivPickCategoryModifyDiv').dialog('open');
//      }

      var dataService = null;

      function setupDataService() {
         if (dataService == null) {
            dataService = new Sys.Data.AdoNetServiceProxy("../LocationDB.svc");
            dataService.set_timeout(60000);
         }
      }
      
      function ModifyCat(categoryId, url, urlType) {

         $("#DivBusy").dialog("open");

         setupDataService();
         dataService.set_defaultFailedCallback(onFailure);
         dataService.set_defaultSucceededCallback(onSuccessGetCategory);
         dataService.query("Category(" + categoryId.toString() + ")");

         $('#PublishDivId').dialog('option', 'title', "Modify this city link");
         $("#InputButtonPublish").attr("value", "Modify this city link");
         $("#InputButtonDelete").show();
         $("#publishNote").html("Note: Only user published this link can modify it.");
      }

      function onFailure(result, userContext, operation) {
         alert(result.get_message() + "\r\tStatus Code:  " + result.get_statusCode() + "\r\tTimed Out:  " + result.get_timedOut());
      }

      function onSuccessGetCategory(result, userContext, operation) {
         var category = result;
         
         $(".inputCategoryID").attr("value", category.CategoryID);
         
         $("#inputCategoryName").attr("value", category.CategoryName);
         $("#inputCategoryDesc").attr("value", category.Description);
         $("#inputCategoryShortName").attr("value", category.CategoryShortName);

         if (category.CategorySvcUrl != null) {
            $("#inputCategorySvcUrl").attr("value", category.CategorySvcUrl);
         }
         else {
            $("#inputCategorySvcUrl").attr("value", "");
         }
         if (category.CategorySvcUrlType != null) {
            $("#inputCategorySvcUrlType").attr("value", category.CategorySvcUrlType);
         }
         else {
            $("#inputCategorySvcUrlType").attr("value", "");
         }

         if (category.MapIconUrl != null) {
            $("#inputMapIconUrl").attr("value", category.MapIconUrl);
         }
         else {
            $("#inputMapIconUrl").attr("value", "");
         }
         $("#inputCategoryParentID").attr("value", category.ParentID);

         dataService.set_defaultSucceededCallback(onSuccessGetCategoryCity);
         dataService.query("Category(" + category.CategoryID.toString() + ")/City");
       
         $("#DivBusy").dialog("close");
         $('#PublishDivId').dialog('open');
      }

      function onSuccessGetCategoryCity(result, userContext, operation) {
         var city = result;
         $("#inputSearchCity").attr("value", city.SearchName);
      }
      
   </script>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="LeftContent" runat="server">
</asp:Content>


   
   
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

   <!-- always udpate when there is update panel action, such as modify or delete -->
   <asp:UpdatePanel ID="UpdatePanel3" runat="server">  
      <ContentTemplate>
 
         <asp:PlaceHolder ID="PlaceHolderCatgories" runat="server"></asp:PlaceHolder>
 
      </ContentTemplate>
   </asp:UpdatePanel>
   <p>
   </p>

   <div class="hide">
      <asp:UpdatePanel ID="UpdatePanel2" runat="server"  UpdateMode="Conditional">
         <ContentTemplate>
            Category ID &nbsp;<asp:TextBox ID="TextBoxCategoryID" runat="server" CssClass="inputCategoryID"></asp:TextBox>
            <br />
            Category Name &nbsp;<asp:TextBox ID="TextBoxCategoryName" runat="server" CssClass="inputCategoryName"></asp:TextBox>
            <br />
            Category Description: &nbsp;<asp:TextBox ID="TextBoxCategoryDesc" runat="server" CssClass="inputCategoryDesc"></asp:TextBox>
            <br />
            Location Name: &nbsp;<asp:TextBox ID="TextBoxCategoryShortName" runat="server" CssClass="inputCategoryShortName"></asp:TextBox>
            <br />
            Remote KML URL:
            <asp:TextBox ID="TextBoxCategorySvcUrl" runat="server" CssClass="inputCategorySvcUrl"></asp:TextBox>
            <br />
            Remote KML URL Type:
            <asp:TextBox ID="TextBoxCategorySvcUrlType" runat="server" CssClass="inputCategorySvcUrlType"></asp:TextBox>
            <br />
            <asp:TextBox ID="TextBoxSearchCity" runat="server" CssClass="inputSearchCity"></asp:TextBox>
            <br />
            <asp:TextBox ID="TextBoxMapIconUrl" runat="server" CssClass="inputMapIconUrl"></asp:TextBox>
            <br />
            Parent Category:
            <asp:TextBox ID="TextBoxParentCategoryID" runat="server" CssClass="inputCategoryParentID"></asp:TextBox>
            <br />
            <asp:Button ID="ButtonPublish" runat="server" Text="Publish this category" CssClass="inputButtonPublish"
               UseSubmitBehavior="false" onclick="ButtonPublish_Click" />
            <asp:Button ID="ButtonDelete" runat="server" Text="Delete this category" CssClass="inputButtonDelete"
               UseSubmitBehavior="false" onclick="ButtonDelete_Click" />
         </ContentTemplate>
      </asp:UpdatePanel>
   </div>
   <div id="PublishDivId" title="Add this Link">
      <table>
         <tr>
            <td style="width:120px;min-width:120px;" valign="top">
               <table>
               <tr>
               
            <td style="width:120px;min-width:120px;">
               Link Name:
            </td>
            <td style="width:150px;min-width:150px;">
               <input id="inputCategoryName" class=":required" type="text" />*
            </td>
               </tr>
               
         <tr>
            <td>
               Link Description:&nbsp;
            </td>
            <td>
               <input id="inputCategoryDesc" class="" type="text" />
         </td>
         </tr>
         <tr>
            <td>
               Link Short Name Unique:&nbsp;
            </td>
            <td>
               <input id="inputCategoryShortName" class=":required" type="text" />*
            </td>
         </tr>
         <tr>
         <td colspan="2">
         City specific links (optional):
         </td>
         </tr>
         <tr>
            <td>
               <a href="#" onclick="PickCity();">Choose a city</a>
            </td>
            <td>
               <input id="inputSearchCity" type="text" value="" class=":required" readonly="readonly" />*
            </td>
         </tr>
         <tr>
            <td>
               Link to external <a href="http://en.wikipedia.org/wiki/KML" target="_blank">KML</a> URL, <a href="http://ogdi.sourceforge.net/" target="_blank">OGDI</a> URL,  <a href="http://en.wikipedia.org/wiki/GeoRSS" target="_blank">GeoRSS</a> URL, or a CSV URL (<a href="/DataFiles/OlympicVenues.csv">sample csv file</a>):&nbsp;
            </td>
            <td>
               <%--it's possible to enter a relative path here, do not use ;url for verification --%>
               <input id="inputCategorySvcUrl" class="" type="text" />
            </td>
         </tr>
         <tr>
            <td>
               URL type: KML, OGDI or CSV file URL
            </td>
            <td>
            <select id="inputCategorySvcUrlType" name="D2">
               <option  selected="selected" value="">N/A</option>
               <option value="kml">KML File</option>
               <option value="ogdi">OGDI</option>
               <option value="georss">GeoRSS</option>
               <option value="csv">CSV File</option>
            </select>
            </td>
         </tr>
         <tr>
            <td>
               Map display icon URL:&nbsp;
            </td>
            <td>
               <%--it's possible to enter a relative path here, do not use ;url for verification --%>
               <input id="inputMapIconUrl" class="" type="text" />
            </td>
         </tr>
         <tr>
            <td colspan="2">
          
               &nbsp;<br />
               <input id="inputCategoryParentID" type="text" class="hide" />
               <input id="InputButtonPublish" type="button" value="Publish this Link" onclick="PublishSubmit();" />
               <input id="InputButtonDelete" type="button" value="Delete this Link" onclick="PublishDelete();" />
               <br /><span id="publishNote"></span>

            </td>
         </tr>
               
               </table>
               </td>
            <td rowspan="9" style="width: 380" align="left" valign="top">
               <div class="chooseCategoryDiv">
                  <ul id="chooseCategory">
                     <li id="0" class="hasChildren" >Choose parent category
                        <ul>
				               <li><span class="placeholder"><img alt='ajax-loader' src='/images/ajax-loader.gif' />&nbsp;</span></li>
                        </ul>
                     </li>
                  </ul>
               </div>
            </td>
         </tr>
      </table>
   </div>

   <div id="ChooseCityDivId" title="Choose search city">
      <div class="chooseCityDiv">

<%--      <a href="#" onclick="ClearCity();">General category, no city</a>
      <br />--%>
      <span>Search City Name
      <input id="TextSearchCity" type="text" onkeyup="OnSearchCity(this.value,  0);" />
      </span>
      <div id="searchCityContent" class="citySearchDiv"></div>
      
      <ul id="chooseCity">
         <li class='hasChildren top' >Choose City
	         <ul>
		         <li><span class="placeholder"><img alt="loading" src='/images/ajax-loader.gif' />&nbsp;</span></li>
	         </ul>
         </li>
      </ul>
      
      </div>
   </div>
   
   <div id="DivBusy" title="Connecting">
      Please Wait. <img alt="loading" src='/images/ajax-loader.gif' />
   </div>
<%--
   <div id="DivPickCategoryModifyDiv" title="Pick a category to modify">
      <div class="chooseCategoryDiv">
      Click the corresponding category to modify
      <ul id="pickCategoryToModify">
      </ul>
      </div>
   </div>--%>
   
</asp:Content>
